<template>
  <div>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#navbar"
            aria-expanded="false"
            aria-controls="navbar"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">后台管理</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <router-link to="/studenthistory">回收站</router-link>
            </li>
            <li>
              <a href="#" @click="showEvent">关于</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <transition name="about">
      <div class="about" v-show="showAbout">
        <div class="zuozhe">
          <p>作者:zzofgod</p>
          <p>
            github地址：
            <a href="https://github.com/zzofgod" target="_blank">https://github.com/zzofgod</a>
          </p>
        </div>
        <div class="close glyphicon glyphicon-remove-circle" @click="hideEvent"></div>
      </div>
    </transition>
  </div>
</template>
<script>
import datacenterBus from "../../assets/datacenterBus.js";
export default {
  data() {
    return {
      showAbout: false,
    };
  },
  methods: {
    showEvent() {
      this.showAbout = true;
    },
    hideEvent() {
      this.showAbout = false;
    },
  }
};
</script>
<style>
.about {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.7;
  text-align: center;
  z-index: 999999;
}
.about .zuozhe {
  width: 400px;
  margin: 0 auto;
  font-size: 20px;
  color: #ebebeb;
  margin-top: 20%;
}
.about .zuozhe a {
  color: #ebebeb;
}
.about .close {
  position: absolute;
  right: 40px;
  top: 40px;
  color: #ebebeb;
  opacity: 1;
  font-weight: 100;
}
.about-enter-active {
  transition: all 1s ease;
}
.about-leave-active {
  transition: all 0.5s ease;
}
.about-enter,
.about-leave-to {
  opacity: 0;
}
</style>


